<style lang="less" scoped>
    .editFeedback{
        position: fixed;
        right: 0;
        bottom:23%;
        z-index: 9;
        .li{
            width: 76px;
            height: 30px;
            font-size: 14px;
            color: #686E71;
            background: #FFFFFF;
            box-shadow: 0 0 4px 0 rgba(0,0,0,0.23);
            margin-bottom: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            .img{
                width: 16px;
                height: 16px;
                display: inline-block;
                margin:  0 9px 0 11px;
            }
        }
        .li:hover{
            color: #FE9333;
        }
        .li1{
            .img{
                background: url('../images/rightbtn_1@2x.png') no-repeat;
                background-size: 100% 100%;
            }
        }
        .li1:hover{
            .img{
                background: url('../images/rightbtn_1_hover@2x.png') no-repeat;
                background-size: 100% 100%;                
            }
        }
        .li2{
            .img{
                background: url('../images/rightbtn_2@2x.png') no-repeat;
                background-size: 100% 100%;     
                vertical-align: middle;      
            }
        }
        .li2:hover{
            .img{
                background: url('../images/rightbtn_2_hover@2x.png') no-repeat;
                background-size: 100% 100%;                
            }
        }
        .li3{
            .img{
                background: url('../images/rightbtn_3@2x.png') no-repeat;
                background-size: 100% 100%;   
                vertical-align: middle;               
            }
        }
        .li3:hover{
            .img{
                background: url('../images/rightbtn_3_hover@2x.png') no-repeat;
                background-size: 100% 100%;           
            }
        }
        .li4{
            position: relative;
            .kefu{
                position: absolute;
                // width: 240px;
                height: 172px;
                background-color: #fff;
                border: 1px solid #E3E8EA;
                top: 0;
                left: -262px;
                display: none;
                padding: 15px;
                div{
                    float: left;
                    // width: 100px;
                    text-align: center;
                    color:#686E71;
                    a{
                        color:#686E71;
                    }
                }                
            }
            .img{
                background: url('../images/rightbtn_4@2x.png') no-repeat;
                background-size: 100% 100%;             
            }
        }
        .li4:hover{
            .kefu{
                display: block;
            }
            .img{
                background: url('../images/rightbtn_4_hover@2x.png') no-repeat;
                background-size: 100% 100%;                 
            }
        }
        .li5{
            position: relative;            
            .fankui{
                position: absolute;		
                width: 240px;
                height: 496px;
                background-color: #fff;
                border: 1px solid #E3E8EA;
                top: -200px;
                left: -242px;
                padding: 15px;
                color:#686E71;
                p{
                    line-height: 22px;
                    margin-bottom: 10px;
                    font-size: 14px;
                }
            }
            .img{
                background: url('../images/rightbtn_5@2x.png') no-repeat;
                background-size: 100% 100%;               
            }
        }
        .li5:hover{
            .img{
                background: url('../images/rightbtn_5_hover@2x.png') no-repeat;
                background-size: 100% 100%;                 
            }
        }
        .li6{
            .img{
                background: url('../images/rightbtn_6@2x.png') no-repeat;
                background-size: 100% 100%;              
            }
        }
        .li6:hover{
            .img{
                background: url('../images/rightbtn_6_hover@2x.png') no-repeat;
                background-size: 100% 100%;                 
            }
        }
    }
    .editFeedbackGg{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        .div{
            width: 600px;
            height: 420px;
            position: relative;
            .close{
                position: absolute;
                width: 22px;
                height:22px;
                right:-35px;
                background: url('../images/fullscreen_close.png') no-repeat;
                background-size: 100% 100%;
                top:20px;
                cursor: pointer;
            }
            img{
                width:100%;
                height:100%;
            }
        }
    }
</style>
<style lang="less">
.editFeedback{
    .ivu-input-wrapper{
        margin-bottom: 10px;
    }
    .ivu-checkbox-wrapper{
        width: 102px;
        margin-right: 0;
        margin-bottom: 11px;
    }
    .ivu-input{
        height: 36px;
        line-height: 36px;
    }
    textarea.ivu-input{
        width: 210px;
        height: 100px;
        resize: none;
    }
    Button{
        margin-left: 65px;
        margin-top: 6px;
    }
}
</style>
<template>
	<div>
        <div class="editFeedback">
            <div class="li li1" @click="chooseGg"><div class="img"></div>公告</div>
            <div class="li li2" ><router-link to="checkRule" target="_blank"><div class="img"></div>审核</router-link></div>
            <div class="li li3"><router-link to="course" target="_blank"><div class="img"></div>教程</router-link></div>
            <div class="li li4">
                <div class="img"></div>
                客服
                <!--  -->
                <div class="kefu">
					<div>
						<a target="_blank"  href="http://sighttp.qq.com/authd?IDKEY=d471b0698860cdae0048d64196d6652ca6daf3886dad47e2">
							<img src="../images/service_QQ.png"/>
							<p>QQ在线交谈</p>
							<p>3337826513</p>
						</a>
					</div>
					<div>
						<img src="../images/service_call.png"/>
						<p>客服: 400-056-9906</p>
						<p>商务: 021-64020620</p>
					</div>
				</div>
            </div>
            <div class="li li5" @click.stop="showBackModal">
                <div class="img"></div>
                反馈
                <div class="fankui" v-show="backModalType" @click.stop="">
					<p>反馈类型</p>
					<CheckboxGroup v-model="checkAllGroup">
                        <Checkbox value="" label="1">{{"登录/注册"}}</Checkbox>
						<Checkbox value="" label="7">{{"查看人物传记"}}</Checkbox>
						<Checkbox value="" label="2">{{"创建人物传记"}}</Checkbox>
						<Checkbox value="" label="8">{{"编辑人物传记"}}</Checkbox>
						<Checkbox value="" label="3">{{"个人设置"}}</Checkbox>
						<Checkbox value="" label="9">{{"增值服务"}}</Checkbox>
						<Checkbox value="" label="4">{{"亲友圈"}}</Checkbox>
						<Checkbox value="" label="10">{{"消息中心"}}</Checkbox>
						<Checkbox value="" label="5">{{"人生感悟"}}</Checkbox>
						<Checkbox value="" label="11">{{"其它"}}</Checkbox>
						<Checkbox value="" label="6">{{"家谱树"}}</Checkbox>	
                    </CheckboxGroup>
					<p>反馈内容</p>
					<Input v-model="backData" type="textarea" placeholder="请输入反馈内容" resized></Input>
					<p>联系方式</p>
					<Input v-model="backPhone" type="text" placeholder="请留下联系方式"></Input>
					<Button type="warning" @click="submitBack()">提交反馈</Button>					
				</div>
            </div>
            <div class="li li6" @click="openEditCourse"><div class="img"></div>引导</div>
        </div>
        <div class="editFeedbackGg" v-show="editFeedbackGgFlg">
            <!-- 关闭按钮 -->
            <div class="div">
                <div class="close" @click="editFeedbackGgFlg=false"></div>
                <img :src="imgurl+ggurl"/>                
            </div>
        </div>
    </div>
</template>
<script>
    import global from '../config/global'
	import { mapState } from 'vuex'
    import { USER_SIGNIN } from 'store/user'
    export default {
        computed: mapState({ user: state => state.user }),
		data() {
				return {
                    //backModalType:false,
                    backType:"",
				    backData:"",
                    backPhone:"",
                    editFeedbackGgFlg:false,
                    ggurl:"",
                    staticimg:global.staticimg,
                    imgurl:global.imgurl,
                    videourl:global.videourl,
                    musicurl:global.musicurl,
                    checkAllGroup:[],
				}
			},
        watch:{
        },
        props:["backModalType"],
		methods:{
            chooseGg(){
                //查看公告
                this.$http.get(global.host+"/affiche/query",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					if(response.body.status == 1){
                        if(!response.body.result.affichePicturePath){
                            this.$Message.error(response.body.result);
                            return;
                        }
                        this.editFeedbackGgFlg = true;
                        this.ggurl = response.body.result.affichePicturePath;
                    }else{
                        this.$Message.error(response.body.message);
                    }
				})
            },
            showBackModal(){//打开意见反馈弹窗
                this.$emit("backModalTypeFun",!this.backModalType)
            },
            submitBack(){
				//意见反馈
				if(this.checkAllGroup == ""){
					 this.$Message.error('请选择反馈类型！');
					 return;
				}
				if(this.backData == ""){
					 this.$Message.error('请输入反馈内容');
					 return;
				}
				if(!(/^1[3|4|5|7|8]\d{9}$/.test(this.backPhone))){
					this.$Message.error('请输入正确的手机号');
					return;
				}
				this.$http.post(global.host+"/feedback/pc/save",{"type":this.checkAllGroup.join(),"content":this.backData,"connection":this.backPhone},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.$Message.success('反馈成功');
					this.checkAllGroup = [];
					this.backData = "";
					this.backPhone = "";
				})
			},
            openEditCourse(){
                this.$emit("openEditCourseFun",true)
            }
		}
    }
</script>